<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="BoxGround">
        <div class="BoxLeft">
            <div class="BoxLeftUp">
                <div class="BoxLU1">校园风光</div>
                <div class="BoxLU2">XIAO YUAN FNEG GUANG</div>
            </div>
            <div class="BoxLeftDown">
                <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.Fx__1B9YKqmaHl0DI8EOqQHaHa?rs=1&pid=ImgDetMain&o=7&rm=3"
                    alt="左侧下方图片">
            </div>
        </div>

        <div class="BoxRightUp">
            <div class="BoxRightUpLeft">
                <img src="https://www.pdsu.edu.cn/__local/2/9A/83/3FCD44E71CE5B4E2F9F4F7C93C7_D6A7E13A_18C63.jpg"
                    alt="右侧上方左侧图片">
            </div>
            <div class="BoxRightUpMiddle">
                <div class="BoxRUM1">XUE SHU YAN JIU</div>
                <div class="BoxRUM2">学术研究</div>
            </div>
            <div class="BoxRightUpRight">
                <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.Hd36SoYh4YbqS7fjqmhSLQHaE8?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                    alt="右侧上方右侧图片">
            </div>
        </div>

        <div class="BoxRightDown">
            <div class="BoxRightDownLeft">
                <div class="BoxRDL1">学生活动</div>
                <div class="BoxRDL2">XUE SHENG HUO DONG</div>
            </div>
            <div class="BoxRightDownMiddle">
                <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.IqzjyZFC7EAc7yY8GoIGkAHaEK?w=242&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                    alt="右侧下方中间图片">
            </div>
            <div class="BoxRightDownRight">
                <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.pEm3Z4_p94boDGVcCN-T3QHaDp?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                    alt="右侧下方右侧图片">
            </div>
        </div>

    </div>
</body>
<style>
    .BoxGround {
        width: 1200px;
        height: 500px;
        background-color: aliceblue;
        margin: auto;
    }

    .BoxLeft {
        width: 300px;
        height: 500px;
        background-color: brown;
        float: left;
    }

    .BoxLeftUp {
        width: 300px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .BoxLU1 {
        font-size: 30px;
        /*字体大小*/
        font-family: "Microsoft YaHei", sans-serif;
        /*字体样式*/
        font-weight: bold;
        /*字体粗细*/
        letter-spacing: 1px;/*间距*/
        padding-left: 60px;
        color: white;
        text-align: normal;
        margin-top: 60px;
    }

    .BoxLU2 {
        font-size: 12px;
        font-family: "Times New Roman", Times, serif;
        /*字体样式*/
        font-weight: bold;
        /*字体粗细*/
        font-style: italic;
        letter-spacing: 1px;
        padding-left: 60px;
        color: white;
        text-align: normal;
        margin-top: 10px;
    }

    .BoxLeftDown {
        width: 300px;
        height: 300px;
        background-color: rgb(38, 14, 179);
        float: left;
    }

    .BoxLeftDown img {
        width: 300px;
        height: 300px;
        object-fit: fill;
    }

    .BoxRightUp {
        width: 900px;
        height: 300px;
        background-color: aqua;
        float: left;
    }

    .BoxRightUpLeft {
        width: 500px;
        height: 300px;
        background-color: purple;
        float: left;
    }

    .BoxRightUpLeft img {
        width: 500px;
        height: 300px;
        object-fit: cover;
    }

    .BoxRightUpMiddle {
        width: 150px;
        height: 300px;
        background-color: rgb(69, 146, 146);
        float: left;
    }

  .BoxRUM1 {
      font-size: 11px;
        font-family: "Times New Roman", Times, serif;
        /*字体样式*/
        font-weight: bold;
        /*字体粗细*/
        font-style: italic;
        letter-spacing: 1px;
        padding-left: 55px;
        color: white;
        text-align: normal;
        margin-top: 35px;
        writing-mode: vertical-rl;
        margin-bottom: 15px;
        float: left;
    }

   .BoxRUM2 {
        font-size: 30px;
        /*字体大小*/
        font-family: "Microsoft YaHei", sans-serif;
        /*字体样式*/
        font-weight: bold;
        /*字体粗细*/
        letter-spacing: 1px;
         margin-top: 25px;
        padding-left: 12px;
        color: white;
        text-align: normal;
        writing-mode: vertical-rl;
        margin-bottom: 15px;
        float: left;
    } 

    .BoxRightUpRight {
        width: 250px;
        height: 300px;
        background-color: rgb(0, 128, 28);
        float: left;
    }

    .BoxRightUpRight img {
        width: 250px;
        height: 300px;
        object-fit: fill;
    }

    .BoxRightDown {
        width: 900px;
        height: 200px;
        background-color: yellow;
        float: left;

    }

    .BoxRightDownLeft {
        width: 300px;
        height: 200px;
        background-color: darkolivegreen;
        float: left;
    }

    .BoxRDL1 {
        font-size: 30px;
        /*字体大小*/
        font-family: "Microsoft YaHei", sans-serif;
        /*字体样式*/
        font-weight: bold;
        /*字体粗细*/
        letter-spacing: 2px;
        /*间距*/
        padding-left: 60px;
        color: white;
        text-align: normal;
        margin-top: 60px;
    }

    .BoxRDL2 {
        font-size: 12px;
        font-family: "Times New Roman", Times, serif;
        /*字体样式*/
        font-weight: bold;
        /*字体粗细*/
        font-style: italic;
        letter-spacing: 1px;
        padding-left: 60px;
        color: white;
        text-align: normal;
        margin-top: 10px;
    }

    .BoxRightDownMiddle {
        width: 300px;
        height: 200px;
        background-color: rgb(162, 130, 100);
        float: left;
    }

    .BoxRightDownMiddle img {
        width: 300px;
        height: 200px;
        object-fit: fill;
    }

    .BoxRightDownRight {
        width: 300px;
        height: 200px;
        background-color: rgb(197, 51, 161);
        float: left;
    }

    .BoxRightDownRight img {
        width: 300px;
        height: 200px;
        object-fit: fill;
    }
</style>

</html>